<template>
	<view class="video-card" >
		<video
			class="video-tag"
			:id="id"
			:src="url"
			:autoplay="false"
			:loop="true"
		    :controls="false"
			object-fit="contain"
			:show-play-btn="false"
			:show-fullscreen-btn="false"
			:show-center-play-btn="false"
			:show-loading="false"
			@waiting="onWaiting"
			@play="onPlay"
			@pause="onPause"
			@progress="onProgress"
			@timeupdate="onTimeupdate"
			@click="onClickVideo"
			@loadedmetadata="onLoadedmetadata"
	
		></video>
		<view class="mask-wrapper" v-if="!(commentVisible && isActiving)">
			<!-- 加载 -->
			<video-loading v-show="loading"></video-loading>
			<!-- 暂停组件 -->
			<view class="iconfont icon-bofang pause-icon" :class="{animate: pauseAnimate}" v-show="playStatus === 'pause'" @click="onClickVideo"></view>
			<!-- 滑动滚动条 -->
			<video-slider :min="0" :max="1" @touchStatus="onTouchStatus" @onChange="onChange" ref="video-slider"></video-slider>
			<!-- 播放时间 -->
			<view class="time-wrapper" v-if="playInfo">
				<text>{{playInfo.time}}</text>
				<text class="split">/</text>
				<text>{{playInfo.totalTime}}</text>
			</view>
			
			<template v-else>
				<!-- 视频文章信息 -->
				<view class="video-info">
					<view class="video-title">
						@郑起吃不起
					</view>
					<view class="video-desc">
						王企鹅几千蚊科技阿斯卡溜达鸡阿卡金卡干垃圾卡萨估计阿卡拉飞机阿卡拉受打击阿卡拉受打击
						<text class="video-tag">#萨达请问请问</text>
						<text class="video-tag">#萨达请问请问</text>
					</view>
				</view>
				
				<!-- 视频控制 -->
				
				<view class="video-contral">
					<view class="video-contral-item">
						<view class="avatar">
							<image src="../../static/logo.png" mode="aspectFill"></image>
							<view class="add-user iconfont icon-tianjia- " ></view>
						</view>
						<view class="iconfont "></view>
					</view>
					<view class="video-contral-item">
						<view class="icon iconfont icon-shoucang"></view>
						<view>3.2万</view>
					</view>
					<view class="video-contral-item" @click="handleOpenComment">
						<view class="icon iconfont icon-pinglun"></view>
						<view>3.2万</view>
					</view>
					<view class="video-contral-item">
						<view class="icon iconfont icon-shoucang1"></view>
						<view>3.2万</view>
					</view>
					<view class="video-contral-item">
						<view class="icon iconfont icon-fenxiang"></view>
						<view>3.2万</view>
					</view>
					<view class="video-contral-item">
						<view class="avatar round-play" :class="{paused: playStatus !== 'play'}">
							<image src="../../static/logo.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 评论位置 -->
		<view class="comment-position" :class="{show: commentVisible && isActiving}"></view>
	</view>
</template>

<script>
	// const list = [
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000cj1lq4jc77u0ng6s1gt0&line=0&file_id=bed51c00899b458cbc5d8280147c22a1&sign=7749aec7bd62a3760065f60e40fc1867&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000cbn2sfbc77u0vpvt4ei0&line=0&file_id=692d7d4f382f40e8a571a40e35f0c887&sign=6acbd42bf63d4a70836d80e20afe60f7&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0300fg10000c4s7r3rc77u313isbq90&line=0&file_id=79a7251ebd49450e87dff8c6c2045193&sign=bfbfd045b09a5fffe2175c946ae37716&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000cdgfmbjc77uf8ildvr1g&line=0&file_id=3666bdea2f5e40d1b3e4643618c4263b&sign=ea304bf093956b3f1899ef2a3dd7221b&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0200fa50000bqv2ovedm15352jvv5vg&line=0&file_id=efac24de9d2548228975fc8429e5bdcb&sign=3b7c4acc3b831e92448d6909510074c0&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0300fg10000cambmmjc77u9qb0i0cqg&line=0&file_id=cae9ebb5eda04242862d0944c1cb91a1&sign=918f1ee6d41643343153beded9c750ff&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000ckvoc03c77u6kchehqhg&line=0&file_id=8e6beec8376d44379c8e1c07edfde8fd&sign=be07da27aece6115bb08874089acd485&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// 	'https://www.douyin.com/aweme/v1/play/?video_id=v0300fe30000c0a35fnsml2qmkctkcsg&line=0&file_id=27fe563493c447dca8bcd98067b2a9b9&sign=bb8f5c705f6466d41de94434e182013e&is_play_url=1&source=PackSourceEnum_PUBLISH',
	// ]
	import { timeTransform } from '@/utils/utils.js'
	export default {
		name:"video-card",
		props: {
			isActiving: { // 是否是选中状态
				type: Boolean,
				default: false
			},
			value: { // 
				type: Object,
				default: () => {return {}}
			},
			commentVisible: { // 评论组件是否开启
				type: Boolean,
				default: false
			}
		},

		
		data() {
			const id = String(Date.now())
			// const id = String(this.value)
			return {
				id,
				videoContext: null, // 视频实例
				// list,
				loading: false, // 是否正在缓冲视频
				playStatus: 'idle' ,// idle空闲 play 正在播放中 pause暂停
				pauseAnimate: false,
				metadata: null, // 视频信息
				playInfo: null, // 播放信息 { totalTime: '00:00:00', time: '00:00:00' }
				touchStatus: false // 进度条触摸状态
			};
		},
		computed: {
			// 自动播放策略
			// autoplay () {
			// 	return this.isActiving
			// }
			url () {
				return this.value.url
			}
		},
		watch: {
			isActiving: {
				handler (v) {
					this.togglePlayStatus(v)
				},
				immediate: true
			}
		},
		mounted () {
			this.videoContext = uni.createVideoContext(this.id, this)
			this.togglePlayStatus(this.isActiving)
		},
		methods: {
			togglePlayStatus (v) {
				// this.videoContext = uni.createVideoContext(this.id, this)
				if (!this.videoContext) return false
				if (v) {
					this.videoContext.play()
					console.log('执行play')
				} else {
					this.videoContext.pause()
				}
			},
			onWaiting (e) {
				this.loading = true
				console.log('出现缓冲')
			},
			onPlay () {
				console.log('开始播放')
				this.playStatus = 'play'
				this.pauseAnimate = false
			},
			onPause () {
				console.log('视频暂停')
				this.playStatus = 'pause'
				this.$nextTick(() => {
					this.pauseAnimate = true
				})
			},
			onProgress () {
				this.loading = false
				// console.log('加载进度条')
			},
			//播放进度变化
			onTimeupdate (v) {
				this.loading = false
				const videoSlider = this.$refs['video-slider']
				
				if (!videoSlider) return false
				const percent = v.detail.currentTime / v.detail.duration
				videoSlider.setValue(percent)
				
			},
			onClickVideo () {
				console.log('点击了视频', this.videoContext)
				if (!this.videoContext) return false
				if (this.playStatus === 'pause') {
					this.videoContext.play()
				} else {
					this.videoContext.pause()
					
				}
			},
			// 加载视频数据源
			onLoadedmetadata (v) {
				this.metadata = v.detail
			},
			// 监听进度条的触摸状态
			onTouchStatus (v) {
				this.touchStatus = v
				if(!v) { // 结束拖拽
					// 跳转到指定时间进行播放
					this.videoContext && this.videoContext.seek(this.playInfo.timeNum)
					this.playInfo = null 
				}
				this.$emit('onTouchStatus',  v)
				
			},
			onChange (percent) {
				if(!this.touchStatus) return false // 进度条没有被触摸，则时间不显示
				if (!this.metadata) return false //没有数据源 时间不显示
				// 总时长
				const d = Math.round(this.metadata.duration)
				const totalTime = timeTransform(d)
				const time = timeTransform(Math.round(d * percent))
				this.playInfo = {
					totalTime, //总时长字符串
					time, // 当前时长字符串
					percent, // 播放百分比
					durationNum: this.metadata.duration, // 总时长 数值
					timeNum: d * percent, // 当前时长 数值
				}
			},
			// 打开评论
			handleOpenComment () {
				this.$emit('openComment')
			}
			
		}
	}
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	.video-card {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.video-tag {
			width: 100%;
			flex: 1;
		}
		.pause-icon {
			position: absolute;
			font-size: 90upx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%) scale(1.5);
			opacity: 0;
			transition: all .3s ease-in-out;
			color: #333;
			&.animate {
				opacity: 0.5;
				transform: translate(-50%, -50%) scale(1);
			}
		}
		.time-wrapper {
			position: absolute;
			font-size: 32upx;
			left: 50%;
			bottom: 100upx;
			transform: translateX(-50%);
			color: #fff;
			.split {
				margin: 0 10upx;
			}
		}
		.video-info {
			position: absolute;
			left: 0;
			bottom: 30upx;
			width: 70%;
			// background-color: pink;
			font-size: 24upx;
			padding-left: 5%;
			.video-title {
				font-size: 32upx;
			}
			.video-desc {
				font-size: 26upx;
				margin-top: 15upx;
				line-height: 1.5;
			}
			.video-tag {
				font-size: 28upx;
				margin-left: 10upx;
			}
		}
		.video-contral {
			width: 15%;
			position: absolute;
			right: 0;
			bottom: 30upx;
			// background-color: rgba(0,0,0,.2);
			font-size: 24upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 40upx;
			.video-contral-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 10upx;
				.icon {
					font-size: 50upx;
				}
				.avatar {
					font-size: 0;
					position: relative;
					image {
						width: 90upx;
						height: 90upx;
						border-radius: 50%;
					}
					.add-user {
						background-color: deeppink;
						color: #fff;
						border-radius: 50%;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translate(-50%, 50%);
						padding: 10upx;
						font-size: 22upx;
					}
				}
			}
		}
	}
	.comment-position {
		height: 0;
		transform-origin: bottom center;
		transition: height .3s ease-in-out;
		// transition-delay: 0.05s;
		$footer-height: 148upx;
		&.show {
			height: calc(65vh - $footer-height);
			position: relative;
			// bottom: -$footer-height;
		}
	}
	.round-play {
		animation: Round 5s linear infinite;
		&.paused {
			animation-play-state: paused;
		}
	}
	@keyframes Round {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}
</style>